<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <script type="text/javascript" src="../../common/js/public.js"></script>
    <script type="text/javascript" src="../../common/js/publicUtils.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=G3GKeZsowwfaOlY71VAd0TfR"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>

    <style>
        .layui-input-inline,.buttondiv .layui-input-inline {
            float: left;
            width: 450px !important;
            margin-right: 10px;
        }
        .error{
            color: red;
            line-height: 20px;
        }
        .layui-form-item {
            margin-bottom: 7px !important;
            clear: both;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form"  id="orgstationform" lay-filter="orgstationform">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label" for="name"><span style="color: red;">*</span>工点名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" lay-verify="title"  placeholder="请输入工点名称" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="pname">所属项目</label>
                <div class="layui-input-inline">
                    <input type="text" id="pname"  placeholder="请输入工法名称" class="layui-input"  readonly>
                    <input type="text" id="projectId" name="projectId" class="layui-input" style="display: none">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="type"><span style="color: red;">*</span>工点类型</label>
                    <div class="layui-input-inline">
                        <select id="type" name="type" ></select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="beginMileage">起点里程</label>
                    <div class="layui-input-inline">
                        <input type="text" id="beginMileage" name="beginMileage"  placeholder="请输入起点里程" class="layui-input" >
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="endMileage">终点里程</label>
                    <div class="layui-input-inline">
                        <input type="text" id="endMileage" name="endMileage"  placeholder="请输入终点里程" class="layui-input" >
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="gps">GPS坐标</label>
                    <div class="layui-input-inline">
                        <input type="text" id="gps" name="gps"  placeholder="请输入或选择GPS坐标" class="layui-input input_button" >
                        <input type="button" class="btn_self layui-btn layui-btn-primary layui-btn-small button_input" onclick="getGps(event)" value="选择" title="选择">
                    </div>

                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="sort"><span style="color: red;">*</span>排&emsp;&emsp;序</label>
                    <div class="layui-input-inline">
                        <input type="text" id="sort" name="sort"  placeholder="请输入排序" class="layui-input" >
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="profile">工点概况</label>
                    <div class="layui-input-inline">
                        <textarea name="profile" id="profile" placeholder="请输入工点概况" class="layui-textarea" ></textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div id='gpsmap' style="display: none;height: 100%;">
    <div id="allmap" style="overflow:hidden;zoom:1;position:relative;width: 100%; height:100%;">
        <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    </div>
</div>
<script>
    var AUflag,flag,datas,form;//AUflag1为保存2为更新
    var mk,overlays_one = [],overlays = [],map;
    $(function () {

    })
    function loadType(){
        layui.use(['form','element'],function(){
            form = layui.form,element = layui.element;
            publicAjax(null,'infDisciplines/queryInfDisciplinesList',{'pid':datas.category},null,null,function(r){
                if(r.code==2000){
                    var data = r.data;
                    var option = '';
                    $.each(data,function(i,e){
                        option += "<option value='"+e.id+"'>"+e.name+"</option>";
                    })
                    $("#type").html(option);
                }
                form.render();
            })
        })

    }
    /**
     * 验证
     */
    function inintData(data,flag) {
        AUflag = flag;
        datas = data;
        loadType();
        if(flag == 1){//添加
            $("#pname").val(data.name);
            $("#projectId").val(data.id);
        }else{//更新
            layui.use("form",function(){
                var form = layui.form;
                form.val("orgstationform",{
                    "name":data.name,
                    "id":data.id,
                    "type":data.type,
                    "sort":data.sort,
                    "projectId":data.projectId,
                    "beginMileage":data.beginMileage,
                    "endMileage":data.endMileage,
                    "gps":data.gps,
                    "profile": data.profile
                })
                $("#pname").val(data.pname);
                form.render();
            })
        }


    }
    /**
     * 添加按钮
     */
    function addOrgstation(){
        var data = $("#orgstationform").serializeJson();
        var url = 'orgstation/insertOrgStation';
        var obj = $(validform().form());
        if(!obj[0]){
            return false;
        }
        var result;
        publicAjax(null,url,data,false,null,function (r) {
            if(r.code==2000){
                laysuccess("添加成功");
                result = r;
            }else{
                layerror("添加失败");
                result = r;
            }
        })
        return result;
    }
    /**
     * 更新按钮
     */
    function updateOrgstation(){
        var data = $("#orgstationform").serializeJson();
        delete data.pid;
        var url = 'orgstation/updateOrgStation';
        var obj = $(validform().form());
        if(!obj[0]){
            return false;
        }
        var result;
        publicAjax(null,url,data,false,null,function (r) {
            if(r.code==2000){
                laysuccess("修改成功");
                result = r;
            }else{
                layerror("修改失败");
                result = r;
            }
        })
        return result;
    }

    //编写表单验证函数validform，在验证按钮注册按钮点击事件内调用验证函数对象
    function validform(){
        return $("#orgstationform").validate({
            rules : {
                name : {
                    required:true,
                    normalizer: function( value ) {
                        return $.trim( value );
                    }
                },
                type : {
                    required:true,
                    normalizer: function( value ) {
                        return $.trim( value );
                    }
                },
                sort : {
                    required:true,
                    number:true,
                    normalizer: function( value ) {
                        return $.trim( value );
                    }
                },
                // gps: {
                //     required:true,
                //     normalizer: function( value ) {
                //         return $.trim( value );
                //     }
                // },
                profile: {
                    maxlength: 500,
                    normalizer: function( value ) {
                        return $.trim( value );
                    }
                },
            },
            messages : {
                name : {
                    required: "工点名称不能为空"
                },
                type:{
                    required: "工点类型不能为空"
                },
                sort:{
                    required: "工点排序不能为空"
                },
                // gps:{
                //     required: "工点GPS位置不能为空"
                // },
                description : {
                    maxlength: "工点概况描述长度不可超过500"
                }
            }
        });
    }

    /**
     * 打开地图按钮
     */
    function getGps() {
        var e = document.all ? window.event : arguments[0] ? arguments[0] : event ;
        e.stopPropagation();
        e.preventDefault();
        var index = layer.open({
            type: 1,
            title: '选择GPS',
            maxmin: true,
            shadeClose: false, //点击遮罩关闭层
            area: ['650px', '480px'],
            content: $("#gpsmap"),
            btn: ['确定'],
            success: function() {
                $('.layui-layer-btn .layui-layer-btn0').css({
                    'border-color': '#1E9FFF ',
                    'background-color': '#1E9FFF'
                })
                // 百度地图API功能
                map = new BMap.Map('map');
                if(AUflag==1){
                    var poi = new BMap.Point(117.227737,31.828551);
                }else{
                    if($("#gps").val()){
                        var arr=$("#gps").val().split(',')
                        var poi = new BMap.Point(arr[0],arr[1]);
                    }else{
                        var poi = new BMap.Point(117.227737,31.828551);
                    }
                }
                map.centerAndZoom(poi, 10);
                mk = new BMap.Marker(poi);//创建标注图标
                overlays_one.push(mk);
                map.addOverlay(mk);//将标注添加到地图中
                map.enableScrollWheelZoom();
                var overlaycomplete = function(e) {
                    overlays_one = [];
                    overlays_one.push(e.overlay);
                    overlays.push(e.overlay);
                };
                var styleOptions = {
                    strokeColor: "red", //边线颜色。
                    fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
                    strokeWeight: 3, //边线的宽度，以像素为单位。
                    strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
                    fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
                    strokeStyle: 'solid' //边线的样式，solid或dashed。
                }
                //实例化鼠标绘制工具
                var drawingManager = new BMapLib.DrawingManager(map, {
                    isOpen: false, //是否开启绘制模式
                    enableDrawingTool: true, //是否显示工具栏
                    drawingToolOptions: {
                        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                        offset: new BMap.Size(5, 5), //偏离值
                        scale: 0.8, //工具栏缩放比例
                        drawingModes: [BMAP_DRAWING_MARKER]
                    },
                    circleOptions: styleOptions, //圆的样式
                    polylineOptions: styleOptions, //线的样式
                    polygonOptions: styleOptions, //多边形的样式
                    rectangleOptions: styleOptions //矩形的样式
                });
                var timer, count = 0;
                map.addEventListener("click", function(e) {
                    clearAll();
//							count++;
//							timer = window.setTimeout(function() {
//								if(count == 1) {
//									console.log(e.point.lng + '|' + e.point.lat );
//								}
//								window.clearTimeout(timer);
//								count = 0;
//							}, 300)
                });
                drawingManager.addEventListener('overlaycomplete', overlaycomplete);
            },
            yes: function(index, layero) {
                $('.layui-layer-btn .layui-layer-btn0').css({
                    'border-color': '#FFC107',
                    'background-color': '#FFC107'
                })
                $("#gps").val(overlays_one[0].point.lng + ',' + overlays_one[0].point.lat);
                layer.close(index);
            },
            cancel: function(index, layero) {
                $('.layui-layer-btn .layui-layer-btn0').css({
                    'border-color': '#FFC107',
                    'background-color': '#FFC107'
                })
            }
        });
    }

    function clearAll() {
        if(mk) map.removeOverlay(mk);
        if(overlays.length > 1) {
            for(var i = 0; i < overlays.length; i++) {
                if(i != overlays.length - 1) {
                    map.removeOverlay(overlays[i]);
                }
            }
        }
    }


</script>
</body>

</html>
